<template>
    <div>
        <div v-show="think" class="think-content" :class="{ closed: isThinkContentClosed }">
            <div class="think-title">思考过程：<i class="iconfont" @click="isThinkContentClosed=!isThinkContentClosed">&#xe649;</i></div>
            <div v-show="!isThinkContentClosed" v-html="formatThinkContent" class="markdown-body"></div>
        </div>
        <div class="markdown-body" ref="contentEl"></div>
    </div>
</template>

<script>
import { marked } from 'marked'
import { toRefs, watch, ref, computed, onMounted } from 'vue'

export default {
    props: {
        content: {
            type: String,
            default: ''
        },
        think: { // 思考过程
            type: String,
            default: ''
        }
    },
    setup (props) {
        const contentEl = ref(null)
        const isThinkContentClosed = ref(false)
        const { content, think } = toRefs(props)

        const updateContent = () => {
            const formatContent = marked(content.value.replace(/\\/g, '\\\\'))
            contentEl.value.innerHTML = formatContent
            if (MathJax) {
                MathJax.typesetPromise()
            }
        }

        watch(content, (newVal) => {
            if (newVal) {
                // console.log('content change...', newVal)
                updateContent()
            }
        })

        const formatThinkContent = computed(() => {
            if (think.value.length > 0) {
                return marked(think.value.replace(/\\/g, '\\\\'))
            }
            return ''
        })

        onMounted(() => {
            updateContent()
        })

        return {
            contentEl,
            formatThinkContent,
            isThinkContentClosed
        }
    }
}
</script>
